<template>
  <view class="ry-segment" :style="wrapperStyle">
    <view
        class="segment-slider"
        :style="sliderStyle"
        :class="{ animate: enableAnimate }"
    ></view>
    <view
        class="segment-item"
        v-for="(item, index) in items"
        :key="item.value"
        :style=" itemStyle"
        @click="handleClick(index)">
      <text
          class="item-text"
          :style="{ color: activeIndex === index ? activeColor : inactiveColor,
           backgroundColor: activeIndex === index ? backgroundColor :null,
           borderRadius: activeIndex === index ? '5rem' : '0rem',
           width: '190rpx',
           textAlign: 'center',
          }">
        {{ item.text }}
      </text>
    </view>
  </view>
</template>

<script>
import {initDictData} from "../../utils/action";

export default {
  name: 'aSegment',
  props: {
    dictCode: String,
    // 初始选中索引
    initialIndex: {
      type: Number,
      default: 0
    },
    activeColor: {
      type: String,
      default: '#f33133',
      validator: (value) => {
        return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value)
      }
    },

    // 未激活颜色
    inactiveColor: {
      type: String,
      default: '#666'
    },
    // 背景颜色
    backgroundColor: {
      type: String,
      default: '#f5f5f5'
    },
    // 背景样式
    backgroundStyle: {
      type: String,
      default: 'border-radius: 1rem;'
    },
    // 是否启用动画
    enableAnimate: {
      type: Boolean,
      default: true
    },
    // 圆角尺寸
    borderRadius: {
      type: String,
      default: '40rpx'
    }
  },
  data() {
    return {
      activeIndex: this.initialIndex,
      itemWidth: 0,
      items: [],
    };
  },
  mounted() {
  },
  computed: {
    wrapperStyle() {
      return {
        borderRadius: this.borderRadius
      }
    },
    sliderStyle() {
      return {
        width: `${this.itemWidth}px`,
        backgroundColor: this.backgroundColor,
        fontColor: this.activeColor,
        transform: `translateX(${this.activeIndex * this.itemWidth}px)`,
        borderRadius: this.borderRadius
      }
    },
    itemStyle() {
      return {
        width: `${this.itemWidth}px`
      }
    }
  },
  watch: {
    dictCode: {
      immediate: true,
      async handler() {
        await this.initData()
      },
    }
  },
  methods: {
    async initData() {
      if (this.dictCode.concat("task_type")) {
        this.items = [{value: 1, text: "咨询记录", tag: "consult_tag"},
          {value: 2, text: "服务记录", tag: "serve_tag"},
          {value: 3, text: "销售记录", tag: "sale_tag"},
          {value: 4, text: "回访记录", tag: "return_visit_tag"}]
      } else {
        this.items = await initDictData(this.dictCode)
      }
    },
    handleClick(index) {
      if (index === this.activeIndex) return
      // 确保activeIndex在合理范围内
      if (this.activeIndex >= this.items.length) {
        this.activeIndex = 0
      }
      this.activeIndex = index
      this.$nextTick(() => {
        this.$emit('change', this.items[this.activeIndex])
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ry-segment {
  --segment-height: 70rpx;
  --text-size: 28rpx;
  --mobile-text-size: 24rpx;
  --active-bg: v-bind(backgroundColor);
  --border-radius: v-bind(borderRadius);
  position: relative;
  display: flex;
  height: 120rpx;
  padding: 4rpx;
  box-sizing: border-box;
  gap: 10rpx;
  --active-color: v-bind(activeColor);
  --inactive-color: v-bind(inactiveColor);

  .segment-item {
    flex: 1;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20rpx;
    will-change: transform; // 启用GPU加速
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s ease-in-out; // 复合动画

    .item-text {
      font-size: 25px;
      font-weight: 500;
      transition: color 0.3s;
      color: v-bind(activeColor) !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
  }

  .segment-slider {
    position: absolute;
    background: #ffffff !important;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
    top: 6rpx;
    bottom: 6rpx;
    border-radius: 32rpx;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    left: 0;
    z-index: 1;
    background-color: v-bind(backgroundColor) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &.animate {
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
  }
}

@media (max-width: 480px) {
  .ry-segment {
    height: 60rpx;

    .item-text {
      font-size: 24rpx !important;
    }
  }
}
</style>
